<template>
  <li class="item">
    <img :src="item.picUrl" />
    <div>
      <h3>
        {{ item.name
        }}<i v-show="item.song.privilege.playMaxbr == 999000" class="sq"></i>
      </h3>
      <div>
        <h4
          v-for="(i, index) in item.song.artists"
          :key="item.song.artists[index].id"
        >
          {{ item.song.artists[index].name }}
        </h4>
      </div>
      <!-- <h5>{{ item.song.album.name }}</h5> -->
    </div>
    <img
      class="play"
      @click="$emit('play', item)"
      src="../assets/play.png"
      alt=""
    />
  </li>
</template>

<script>
export default {
  name: "NewestListItem",
  props: {
    item: Object,
  },
  created() {
    // console.log(this.item.song.privilege.playMaxbr)
  },
};
</script>

<style lang="less" scoped>
.item {
  height: 80px;
  margin: 0px 15px;
  border-bottom: 1px solid #d0d0d0;
  padding: 8px 0px;
  position: relative;
  img {
    height: 80px;
    width: 80px;
    border-radius: 10px;
    float: left;
  }
  div {
    margin-left: 115px;
    h3 {
      font-size: 17px;
      font-weight: 400;
      margin-top: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      i.sq {
        display: inline-block;
        width: 25px;
        height: 15px;
        margin-left: 4px;
        background: url("../assets/small.png") no-repeat;
        background-size: 220px 125px;
        background-position-y: 4px;
      }
    }
    div {
      margin-left: 0px;
      height: 30px;
      overflow: hidden;
      h4 {
        display: inline-block;
        margin-right: 10px;
        margin-top: 5px;
        font-size: 14px;
        color: #888;
        position: relative;
        font-weight: 500;
        &::after {
          content: "";
          position: absolute;
          left: 0px;
          bottom: 2.5px;
          width: 100%;
          height: 2px;
          background: #8ac4d0;
          border-radius: 50%;
        }
      }
    }

    h5 {
      // margin-left: 25px;
      // display: inline-block;
    }
  }
  .play {
    height: 25px;
    width: 25px;
    position: absolute;
    right: 0px;
    bottom: 10px;
  }
}
</style>